<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据库CRUD操作动画演示</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#6b7280',
                        success: '#10b981',
                        warning: '#f59e0b',
                        danger: '#ef4444',
                        accent: '#8b5cf6',
                        dark: '#1f2937',
                        light: '#f9fafb'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-gradient {
                background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
            }
            .table-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            }
            .transition-medium {
                transition: all 0.3s ease;
            }
            .scale-in {
                animation: scaleIn 0.3s ease-out;
            }
            .scale-out {
                animation: scaleOut 0.3s ease-in;
            }
            .slide-in {
                animation: slideIn 0.3s ease-out;
            }
            .fade-out {
                animation: fadeOut 0.3s ease-in;
            }
            .highlight-row {
                animation: highlight 1s ease;
            }
            .pulse-animation {
                animation: pulse 2s infinite;
            }
            @keyframes scaleIn {
                0% { transform: scale(0.95); opacity: 0; }
                100% { transform: scale(1); opacity: 1; }
            }
            @keyframes scaleOut {
                0% { transform: scale(1); opacity: 1; }
                100% { transform: scale(0.95); opacity: 0; }
            }
            @keyframes slideIn {
                0% { transform: translateY(-10px); opacity: 0; }
                100% { transform: translateY(0); opacity: 1; }
            }
            @keyframes fadeOut {
                0% { opacity: 1; }
                100% { opacity: 0; }
            }
            @keyframes highlight {
                0% { background-color: rgba(139, 92, 246, 0.2); }
                100% { background-color: transparent; }
            }
            @keyframes pulse {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.5; }
            }
            .form-input-focus {
                @apply focus:ring-2 focus:ring-primary focus:border-primary focus:outline-none;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-dark min-h-screen">
    <!-- 页面头部 -->
    <header class="bg-white shadow-md">
        <div class="container mx-auto px-4 py-6">
            <h1 class="text-3xl font-bold text-center">
                <i class="fa fa-database text-accent mr-2"></i>
                数据库CRUD操作动画演示
            </h1>
            <p class="text-center text-secondary mt-2">交互式体验数据的增删改操作</p>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="container mx-auto px-4 py-8">
        <!-- 操作类型选择 -->
        <div class="mb-8">
            <div class="flex flex-wrap gap-3 justify-center">
                <button id="insertTab" class="operation-tab active px-6 py-3 rounded-lg font-medium bg-primary text-white transition-medium flex items-center">
                    <i class="fa fa-plus-circle mr-2"></i>插入记录
                </button>
                <button id="updateTab" class="operation-tab px-6 py-3 rounded-lg font-medium bg-gray-200 text-gray-700 transition-medium flex items-center">
                    <i class="fa fa-pencil mr-2"></i>修改记录
                </button>
                <button id="deleteTab" class="operation-tab px-6 py-3 rounded-lg font-medium bg-gray-200 text-gray-700 transition-medium flex items-center">
                    <i class="fa fa-trash mr-2"></i>删除记录
                </button>
            </div>
        </div>

        <!-- 操作面板 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <!-- 操作表单 -->
            <div class="card-gradient rounded-xl p-6 table-shadow">
                <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                    <i id="formIcon" class="fa fa-plus-circle text-primary mr-2"></i>
                    <span id="formTitle">插入记录</span>
                </h3>
                
                <!-- 插入表单 -->
                <div id="insertForm" class="operation-form">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-secondary mb-1">员工姓名</label>
                            <input type="text" id="insertName" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus" placeholder="请输入姓名">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-secondary mb-1">部门</label>
                            <select id="insertDepartment" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus">
                                <option value="技术部">技术部</option>
                                <option value="市场部">市场部</option>
                                <option value="人力资源部">人力资源部</option>
                                <option value="财务部">财务部</option>
                                <option value="销售部">销售部</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-secondary mb-1">职位</label>
                            <input type="text" id="insertPosition" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus" placeholder="请输入职位">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-secondary mb-1">性别</label>
                            <select id="insertGender" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus">
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-secondary mb-1">工资</label>
                            <input type="number" id="insertSalary" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus" placeholder="请输入工资" min="0">
                        </div>
                        <button id="insertBtn" class="w-full bg-primary hover:bg-primary/90 text-white py-3 px-6 rounded-lg transition-medium flex items-center justify-center">
                            <i class="fa fa-check-circle mr-2"></i>
                            插入数据
                        </button>
                    </div>
                </div>
                
                <!-- 修改表单 -->
                <div id="updateForm" class="operation-form hidden">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-secondary mb-1">选择要修改的记录</label>
                            <select id="updateRecordSelect" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus">
                                <!-- 由JavaScript动态生成选项 -->
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-secondary mb-1">员工姓名</label>
                            <input type="text" id="updateName" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus" placeholder="请输入姓名">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-secondary mb-1">部门</label>
                            <select id="updateDepartment" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus">
                                <option value="技术部">技术部</option>
                                <option value="市场部">市场部</option>
                                <option value="人力资源部">人力资源部</option>
                                <option value="财务部">财务部</option>
                                <option value="销售部">销售部</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-secondary mb-1">职位</label>
                            <input type="text" id="updatePosition" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus" placeholder="请输入职位">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-secondary mb-1">性别</label>
                            <select id="updateGender" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus">
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-secondary mb-1">工资</label>
                            <input type="number" id="updateSalary" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus" placeholder="请输入工资" min="0">
                        </div>
                        <button id="updateBtn" class="w-full bg-warning hover:bg-warning/90 text-white py-3 px-6 rounded-lg transition-medium flex items-center justify-center">
                            <i class="fa fa-check-circle mr-2"></i>
                            更新数据
                        </button>
                    </div>
                </div>
                
                <!-- 删除表单 -->
                <div id="deleteForm" class="operation-form hidden">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-secondary mb-1">选择要删除的记录</label>
                            <select id="deleteRecordSelect" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus">
                                <!-- 由JavaScript动态生成选项 -->
                            </select>
                        </div>
                        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i class="fa fa-exclamation-triangle text-yellow-500"></i>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-yellow-700">
                                        删除操作将永久移除所选记录。请谨慎操作！
                                    </p>
                                </div>
                            </div>
                        </div>
                        <button id="deleteBtn" class="w-full bg-danger hover:bg-danger/90 text-white py-3 px-6 rounded-lg transition-medium flex items-center justify-center">
                            <i class="fa fa-check-circle mr-2"></i>
                            确认删除
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- SQL查询语句和操作日志 -->
            <div class="card-gradient rounded-xl p-6 table-shadow">
                <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                    <i class="fa fa-code text-primary mr-2"></i>
                    SQL语句
                </h3>
                
                <div class="bg-gray-900 text-gray-100 p-4 rounded-lg font-mono text-sm overflow-x-auto mb-6">
                    <pre id="sqlQuery">-- 请选择操作类型并填写表单</pre>
                </div>
                
                <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                    <i class="fa fa-history text-primary mr-2"></i>
                    操作日志
                </h3>
                
                <div class="bg-gray-100 p-4 rounded-lg max-h-64 overflow-y-auto text-sm" id="operationLog">
                    <div class="text-gray-500 italic">操作日志将显示在这里...</div>
                </div>
            </div>
            
            <!-- 动画说明 -->
            <div class="card-gradient rounded-xl p-6 table-shadow">
                <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                    <i class="fa fa-info-circle text-primary mr-2"></i>
                    操作说明
                </h3>
                
                <div id="insertInstructions" class="instructions">
                    <ul class="space-y-3 text-gray-700">
                        <li class="flex items-start">
                            <i class="fa fa-arrow-right text-primary mt-1 mr-2"></i>
                            <span>填写员工信息表单</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-arrow-right text-primary mt-1 mr-2"></i>
                            <span>点击"插入数据"按钮</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-arrow-right text-primary mt-1 mr-2"></i>
                            <span>观察新记录如何被添加到表格中</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-arrow-right text-primary mt-1 mr-2"></i>
                            <span>注意SQL语句和操作日志的变化</span>
                        </li>
                    </ul>
                    <div class="mt-4 p-3 bg-primary/10 rounded-lg">
                        <p class="text-sm text-gray-700">
                            <strong>插入操作动画效果：</strong>记录会从表格下方滑入，并伴随高亮效果
                        </p>
                    </div>
                </div>
                
                <div id="updateInstructions" class="instructions hidden">
                    <ul class="space-y-3 text-gray-700">
                        <li class="flex items-start">
                            <i class="fa fa-arrow-right text-warning mt-1 mr-2"></i>
                            <span>从下拉菜单中选择要修改的记录</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-arrow-right text-warning mt-1 mr-2"></i>
                            <span>修改表单中的信息</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-arrow-right text-warning mt-1 mr-2"></i>
                            <span>点击"更新数据"按钮</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-arrow-right text-warning mt-1 mr-2"></i>
                            <span>观察记录如何被更新</span>
                        </li>
                    </ul>
                    <div class="mt-4 p-3 bg-warning/10 rounded-lg">
                        <p class="text-sm text-gray-700">
                            <strong>修改操作动画效果：</strong>被修改的记录会闪烁黄色，并更新显示新的值
                        </p>
                    </div>
                </div>
                
                <div id="deleteInstructions" class="instructions hidden">
                    <ul class="space-y-3 text-gray-700">
                        <li class="flex items-start">
                            <i class="fa fa-arrow-right text-danger mt-1 mr-2"></i>
                            <span>从下拉菜单中选择要删除的记录</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-arrow-right text-danger mt-1 mr-2"></i>
                            <span>点击"确认删除"按钮</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-arrow-right text-danger mt-1 mr-2"></i>
                            <span>观察记录如何从表格中移除</span>
                        </li>
                    </ul>
                    <div class="mt-4 p-3 bg-danger/10 rounded-lg">
                        <p class="text-sm text-gray-700">
                            <strong>删除操作动画效果：</strong>被删除的记录会逐渐淡出并收缩，然后从表格中消失
                        </p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 数据表格 -->
        <div class="card-gradient rounded-xl p-6 table-shadow">
            <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                <i class="fa fa-table text-accent mr-2"></i>
                员工数据表
            </h3>
            
            <div class="overflow-x-auto">
                <table id="dataTable" class="min-w-full bg-white rounded-lg overflow-hidden">
                    <thead class="bg-accent text-white">
                        <tr>
                            <th class="px-4 py-3 text-left">ID</th>
                            <th class="px-4 py-3 text-left">姓名</th>
                            <th class="px-4 py-3 text-left">部门</th>
                            <th class="px-4 py-3 text-left">职位</th>
                            <th class="px-4 py-3 text-left">性别</th>
                            <th class="px-4 py-3 text-left">工资</th>
                            <th class="px-4 py-3 text-left">操作</th>
                        </tr>
                    </thead>
                    <tbody id="dataTableBody">
                        <!-- 数据将通过JavaScript动态生成 -->
                    </tbody>
                </table>
            </div>
            
            <!-- 空数据提示 -->
            <div id="emptyDataMessage" class="hidden py-12 text-center">
                <div class="text-gray-400 mb-3">
                    <i class="fa fa-folder-open-o text-5xl"></i>
                </div>
                <p class="text-gray-500">数据表为空，请插入新记录</p>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white py-6 mt-12 border-t border-gray-200">
        <div class="container mx-auto px-4 text-center text-secondary">
            <p>数据库CRUD操作动画演示 © 2024</p>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 模拟数据库数据
        let employees = [
            { id: 1, name: '张三', department: '技术部', position: '软件工程师', gender: '男', salary: 15000 },
            { id: 2, name: '李四', department: '技术部', position: '产品经理', gender: '女', salary: 18000 },
            { id: 3, name: '王五', department: '市场部', position: '市场专员', gender: '男', salary: 12000 },
            { id: 4, name: '赵六', department: '人力资源部', position: 'HR', gender: '女', salary: 10000 },
            { id: 5, name: '钱七', department: '财务部', position: '会计', gender: '女', salary: 13000 }
        ];

        // 用于生成唯一ID
        let lastId = 5;

        // DOM元素
        const dataTableBody = document.getElementById('dataTableBody');
        const emptyDataMessage = document.getElementById('emptyDataMessage');
        const sqlQuery = document.getElementById('sqlQuery');
        const operationLog = document.getElementById('operationLog');
        
        // 选项卡元素
        const insertTab = document.getElementById('insertTab');
        const updateTab = document.getElementById('updateTab');
        const deleteTab = document.getElementById('deleteTab');
        
        // 表单元素
        const insertForm = document.getElementById('insertForm');
        const updateForm = document.getElementById('updateForm');
        const deleteForm = document.getElementById('deleteForm');
        
        // 说明元素
        const insertInstructions = document.getElementById('insertInstructions');
        const updateInstructions = document.getElementById('updateInstructions');
        const deleteInstructions = document.getElementById('deleteInstructions');
        
        // 表单标题和图标
        const formTitle = document.getElementById('formTitle');
        const formIcon = document.getElementById('formIcon');
        
        // 插入表单元素
        const insertName = document.getElementById('insertName');
        const insertDepartment = document.getElementById('insertDepartment');
        const insertPosition = document.getElementById('insertPosition');
        const insertGender = document.getElementById('insertGender');
        const insertSalary = document.getElementById('insertSalary');
        const insertBtn = document.getElementById('insertBtn');
        
        // 修改表单元素
        const updateRecordSelect = document.getElementById('updateRecordSelect');
        const updateName = document.getElementById('updateName');
        const updateDepartment = document.getElementById('updateDepartment');
        const updatePosition = document.getElementById('updatePosition');
        const updateGender = document.getElementById('updateGender');
        const updateSalary = document.getElementById('updateSalary');
        const updateBtn = document.getElementById('updateBtn');
        
        // 删除表单元素
        const deleteRecordSelect = document.getElementById('deleteRecordSelect');
        const deleteBtn = document.getElementById('deleteBtn');

        // 初始化页面
        function initializePage() {
            renderDataTable();
            updateFormOptions();
            updateSqlQuery('-- 请选择操作类型并填写表单');
            addLogEntry('系统初始化完成，数据表已加载');
        }

        // 渲染数据表
        function renderDataTable() {
            dataTableBody.innerHTML = '';
            
            if (employees.length === 0) {
                emptyDataMessage.classList.remove('hidden');
                return;
            }
            
            emptyDataMessage.classList.add('hidden');
            
            employees.forEach(employee => {
                const row = document.createElement('tr');
                row.className = 'border-b transition-medium hover:bg-gray-50';
                row.dataset.id = employee.id;
                
                row.innerHTML = `
                    <td class="px-4 py-3">${employee.id}</td>
                    <td class="px-4 py-3">${employee.name}</td>
                    <td class="px-4 py-3">${employee.department}</td>
                    <td class="px-4 py-3">${employee.position}</td>
                    <td class="px-4 py-3">${employee.gender}</td>
                    <td class="px-4 py-3">${employee.salary.toLocaleString()}</td>
                    <td class="px-4 py-3">
                        <div class="flex space-x-2">
                            <button class="edit-btn p-1 text-warning hover:text-warning/80 transition-medium" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="delete-btn p-1 text-danger hover:text-danger/80 transition-medium" title="删除">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>
                    </td>
                `;
                
                dataTableBody.appendChild(row);
            });
            
            // 添加编辑和删除按钮事件
            addRowEventListeners();
        }

        // 更新表单选项
        function updateFormOptions() {
            // 更新修改表单选项
            updateRecordSelect.innerHTML = '';
            if (employees.length === 0) {
                const emptyOption = document.createElement('option');
                emptyOption.value = '';
                emptyOption.textContent = '暂无记录';
                emptyOption.disabled = true;
                updateRecordSelect.appendChild(emptyOption);
            } else {
                employees.forEach(employee => {
                    const option = document.createElement('option');
                    option.value = employee.id;
                    option.textContent = `${employee.id} - ${employee.name}`;
                    updateRecordSelect.appendChild(option);
                });
                
                // 如果有记录，触发选择变化事件加载第一个记录的数据
                updateRecordSelect.dispatchEvent(new Event('change'));
            }
            
            // 更新删除表单选项（与修改表单相同）
            deleteRecordSelect.innerHTML = updateRecordSelect.innerHTML;
        }

        // 添加行内操作按钮事件监听器
        function addRowEventListeners() {
            // 编辑按钮事件
            document.querySelectorAll('.edit-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const row = this.closest('tr');
                    const id = parseInt(row.dataset.id);
                    
                    // 切换到修改选项卡
                    switchToTab('update');
                    
                    // 选择对应的记录
                    updateRecordSelect.value = id;
                    updateRecordSelect.dispatchEvent(new Event('change'));
                });
            });
            
            // 删除按钮事件
            document.querySelectorAll('.delete-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const row = this.closest('tr');
                    const id = parseInt(row.dataset.id);
                    
                    // 切换到删除选项卡
                    switchToTab('delete');
                    
                    // 选择对应的记录
                    deleteRecordSelect.value = id;
                });
            });
        }

        // 切换选项卡
        function switchToTab(tabName) {
            // 重置所有选项卡样式
            [insertTab, updateTab, deleteTab].forEach(tab => {
                tab.classList.remove('active', 'bg-primary', 'text-white');
                tab.classList.add('bg-gray-200', 'text-gray-700');
            });
            
            // 隐藏所有表单
            [insertForm, updateForm, deleteForm].forEach(form => {
                form.classList.add('hidden');
            });
            
            // 隐藏所有说明
            [insertInstructions, updateInstructions, deleteInstructions].forEach(instr => {
                instr.classList.add('hidden');
            });
            
            // 激活选中的选项卡
            if (tabName === 'insert') {
                insertTab.classList.add('active', 'bg-primary', 'text-white');
                insertTab.classList.remove('bg-gray-200', 'text-gray-700');
                insertForm.classList.remove('hidden');
                insertInstructions.classList.remove('hidden');
                formTitle.textContent = '插入记录';
                formIcon.className = 'fa fa-plus-circle text-primary mr-2';
                updateSqlQuery('-- 准备插入新记录');
            } else if (tabName === 'update') {
                updateTab.classList.add('active', 'bg-primary', 'text-white');
                updateTab.classList.remove('bg-gray-200', 'text-gray-700');
                updateForm.classList.remove('hidden');
                updateInstructions.classList.remove('hidden');
                formTitle.textContent = '修改记录';
                formIcon.className = 'fa fa-pencil text-warning mr-2';
                updateSqlQuery('-- 准备修改记录');
            } else if (tabName === 'delete') {
                deleteTab.classList.add('active', 'bg-primary', 'text-white');
                deleteTab.classList.remove('bg-gray-200', 'text-gray-700');
                deleteForm.classList.remove('hidden');
                deleteInstructions.classList.remove('hidden');
                formTitle.textContent = '删除记录';
                formIcon.className = 'fa fa-trash text-danger mr-2';
                updateSqlQuery('-- 准备删除记录');
            }
        }

        // 更新SQL查询显示
        function updateSqlQuery(query) {
            sqlQuery.textContent = query;
        }

        // 添加日志条目
        function addLogEntry(message) {
            const timestamp = new Date().toLocaleTimeString();
            const logEntry = document.createElement('div');
            logEntry.className = 'py-1 border-b border-gray-200 last:border-b-0';
            logEntry.innerHTML = `<span class="text-gray-500">[${timestamp}]</span> ${message}`;
            
            // 如果是第一条日志，清空初始提示
            if (operationLog.querySelector('.text-gray-500.italic')) {
                operationLog.innerHTML = '';
            }
            
            operationLog.appendChild(logEntry);
            operationLog.scrollTop = operationLog.scrollHeight;
        }

        // 验证插入表单
        function validateInsertForm() {
            if (!insertName.value.trim()) {
                addLogEntry('<span class="text-danger">错误：姓名不能为空</span>');
                return false;
            }
            if (!insertPosition.value.trim()) {
                addLogEntry('<span class="text-danger">错误：职位不能为空</span>');
                return false;
            }
            if (!insertSalary.value || insertSalary.value <= 0) {
                addLogEntry('<span class="text-danger">错误：请输入有效的工资</span>');
                return false;
            }
            return true;
        }

        // 验证更新表单
        function validateUpdateForm() {
            if (!updateName.value.trim()) {
                addLogEntry('<span class="text-danger">错误：姓名不能为空</span>');
                return false;
            }
            if (!updatePosition.value.trim()) {
                addLogEntry('<span class="text-danger">错误：职位不能为空</span>');
                return false;
            }
            if (!updateSalary.value || updateSalary.value <= 0) {
                addLogEntry('<span class="text-danger">错误：请输入有效的工资</span>');
                return false;
            }
            if (!updateRecordSelect.value) {
                addLogEntry('<span class="text-danger">错误：请选择要修改的记录</span>');
                return false;
            }
            return true;
        }

        // 插入记录
        function insertRecord() {
            if (!validateInsertForm()) return;
            
            // 创建新记录
            const newId = ++lastId;
            const newEmployee = {
                id: newId,
                name: insertName.value.trim(),
                department: insertDepartment.value,
                position: insertPosition.value.trim(),
                gender: insertGender.value,
                salary: parseFloat(insertSalary.value)
            };
            
            // 构建SQL语句
            const sql = `INSERT INTO employees (id, name, department, position, gender, salary) VALUES (${newId}, '${newEmployee.name}', '${newEmployee.department}', '${newEmployee.position}', '${newEmployee.gender}', ${newEmployee.salary});`;
            updateSqlQuery(sql);
            
            // 添加到数据列表
            employees.push(newEmployee);
            
            // 添加日志
            addLogEntry(`<span class="text-success">成功：已插入ID为${newId}的记录</span>`);
            
            // 更新表格（使用动画）
            const row = document.createElement('tr');
            row.className = 'border-b scale-in';
            row.dataset.id = newId;
            
            row.innerHTML = `
                <td class="px-4 py-3">${newEmployee.id}</td>
                <td class="px-4 py-3">${newEmployee.name}</td>
                <td class="px-4 py-3">${newEmployee.department}</td>
                <td class="px-4 py-3">${newEmployee.position}</td>
                <td class="px-4 py-3">${newEmployee.gender}</td>
                <td class="px-4 py-3">${newEmployee.salary.toLocaleString()}</td>
                <td class="px-4 py-3">
                    <div class="flex space-x-2">
                        <button class="edit-btn p-1 text-warning hover:text-warning/80 transition-medium" title="编辑">
                            <i class="fa fa-pencil"></i>
                        </button>
                        <button class="delete-btn p-1 text-danger hover:text-danger/80 transition-medium" title="删除">
                            <i class="fa fa-trash"></i>
                        </button>
                    </div>
                </td>
            `;
            
            // 添加行并滚动到底部
            dataTableBody.appendChild(row);
            row.scrollIntoView({ behavior: 'smooth', block: 'end' });
            
            // 高亮显示新行
            setTimeout(() => {
                row.classList.add('bg-success/10');
                setTimeout(() => {
                    row.classList.remove('bg-success/10');
                }, 1500);
            }, 100);
            
            // 更新表单选项
            updateFormOptions();
            
            // 重置表单
            insertName.value = '';
            insertPosition.value = '';
            insertSalary.value = '';
            
            // 添加事件监听器
            addRowEventListeners();
            
            // 隐藏空数据提示
            emptyDataMessage.classList.add('hidden');
        }

        // 更新记录
        function updateRecord() {
            if (!validateUpdateForm()) return;
            
            const id = parseInt(updateRecordSelect.value);
            const employeeIndex = employees.findIndex(e => e.id === id);
            
            if (employeeIndex === -1) {
                addLogEntry('<span class="text-danger">错误：找不到要修改的记录</span>');
                return;
            }
            
            // 构建SQL语句
            const sql = `UPDATE employees SET name='${updateName.value.trim()}', department='${updateDepartment.value}', position='${updatePosition.value.trim()}', gender='${updateGender.value}', salary=${parseFloat(updateSalary.value)} WHERE id=${id};`;
            updateSqlQuery(sql);
            
            // 更新数据
            const updatedEmployee = {
                id: id,
                name: updateName.value.trim(),
                department: updateDepartment.value,
                position: updatePosition.value.trim(),
                gender: updateGender.value,
                salary: parseFloat(updateSalary.value)
            };
            
            employees[employeeIndex] = updatedEmployee;
            
            // 添加日志
            addLogEntry(`<span class="text-warning">成功：已更新ID为${id}的记录</span>`);
            
            // 找到对应的行并更新
            const row = dataTableBody.querySelector(`tr[data-id="${id}"]`);
            if (row) {
                // 闪烁动画
                row.classList.add('bg-warning/10');
                
                // 更新内容
                setTimeout(() => {
                    row.innerHTML = `
                        <td class="px-4 py-3">${updatedEmployee.id}</td>
                        <td class="px-4 py-3">${updatedEmployee.name}</td>
                        <td class="px-4 py-3">${updatedEmployee.department}</td>
                        <td class="px-4 py-3">${updatedEmployee.position}</td>
                        <td class="px-4 py-3">${updatedEmployee.gender}</td>
                        <td class="px-4 py-3">${updatedEmployee.salary.toLocaleString()}</td>
                        <td class="px-4 py-3">
                            <div class="flex space-x-2">
                                <button class="edit-btn p-1 text-warning hover:text-warning/80 transition-medium" title="编辑">
                                    <i class="fa fa-pencil"></i>
                                </button>
                                <button class="delete-btn p-1 text-danger hover:text-danger/80 transition-medium" title="删除">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    `;
                    
                    // 移除高亮
                    setTimeout(() => {
                        row.classList.remove('bg-warning/10');
                    }, 1000);
                    
                    // 添加事件监听器
                    addRowEventListeners();
                }, 300);
            }
            
            // 更新表单选项
            updateFormOptions();
        }

        // 删除记录
        function deleteRecord() {
            const id = parseInt(deleteRecordSelect.value);
            
            if (!id) {
                addLogEntry('<span class="text-danger">错误：请选择要删除的记录</span>');
                return;
            }
            
            // 构建SQL语句
            const sql = `DELETE FROM employees WHERE id=${id};`;
            updateSqlQuery(sql);
            
            // 从数据列表中删除
            const employeeIndex = employees.findIndex(e => e.id === id);
            if (employeeIndex === -1) {
                addLogEntry('<span class="text-danger">错误：找不到要删除的记录</span>');
                return;
            }
            
            const deletedEmployee = employees[employeeIndex];
            employees.splice(employeeIndex, 1);
            
            // 添加日志
            addLogEntry(`<span class="text-danger">成功：已删除ID为${id}的记录（${deletedEmployee.name}）</span>`);
            
            // 找到对应的行并应用删除动画
            const row = dataTableBody.querySelector(`tr[data-id="${id}"]`);
            if (row) {
                // 添加删除动画
                row.classList.add('scale-out');
                
                // 动画完成后移除行
                setTimeout(() => {
                    row.remove();
                    
                    // 如果表格为空，显示空数据提示
                    if (employees.length === 0) {
                        emptyDataMessage.classList.remove('hidden');
                    }
                }, 300);
            }
            
            // 更新表单选项
            updateFormOptions();
        }

        // 加载选中的记录到更新表单
        function loadRecordToUpdateForm(id) {
            const employee = employees.find(e => e.id === parseInt(id));
            if (employee) {
                updateName.value = employee.name;
                updateDepartment.value = employee.department;
                updatePosition.value = employee.position;
                updateGender.value = employee.gender;
                updateSalary.value = employee.salary;
            }
        }

        // 事件监听器
        // 选项卡切换
        insertTab.addEventListener('click', () => switchToTab('insert'));
        updateTab.addEventListener('click', () => switchToTab('update'));
        deleteTab.addEventListener('click', () => switchToTab('delete'));
        
        // 插入按钮
        insertBtn.addEventListener('click', insertRecord);
        
        // 更新按钮
        updateBtn.addEventListener('click', updateRecord);
        
        // 删除按钮
        deleteBtn.addEventListener('click', deleteRecord);
        
        // 更新记录选择变化
        updateRecordSelect.addEventListener('change', function() {
            if (this.value) {
                loadRecordToUpdateForm(this.value);
            }
        });

        // 页面加载完成后初始化
        window.addEventListener('DOMContentLoaded', initializePage);
    </script>
</body>
</html>